/*
 * Copyright 2019 the original author or authors.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */


import { store } from "@mall/api-services"
import classNames from "classnames"
import * as React from "react"
import Flex from "../components/flex"
import ProductList from "../product/product-list"
import "./products.scss"


enum ProductSort {
  BestDesc,
  SalesDesc,
  DateDesc,
  PriceAsc,
  PriceDesc,
}

interface StoreProductsProps {
  storeInfo: store.Store;
}

interface StoreProductsState {
  products: store.Product[];
  sort: ProductSort;
}

export default class StoreProducts extends React.Component<StoreProductsProps, StoreProductsState> {

  public constructor(props: Readonly<StoreProductsProps>) {
    super(props)
    this.state = {
      products: [],
      sort: ProductSort.BestDesc,
    }
  }

  public componentDidMount(): void {
    this.refreshProducts()
  }

  public componentDidUpdate(prevProps: Readonly<StoreProductsProps>,
                            prevState: Readonly<StoreProductsState>, snapshot?: any): void {

    if (prevProps.storeInfo.id !== this.props.storeInfo.id) {
      this.refreshProducts()
    }
  }

  public render() {
    const { products, sort } = this.state

    return (
      <div className="store-products">
        <header>
          <Flex className="store-products-sort-bar">
                        <span className={classNames("sort-button", {
                          active: sort === ProductSort.BestDesc,
                        })} onClick={() => this.setState({ sort: ProductSort.BestDesc })}>综合</span>
            <span className={classNames("sort-button", {
              active: sort === ProductSort.SalesDesc,
            })} onClick={() => this.setState({ sort: ProductSort.SalesDesc })}>销量</span>
            <span className={classNames("sort-button", {
              active: sort === ProductSort.DateDesc,
            })} onClick={() => this.setState({ sort: ProductSort.DateDesc })}>新品</span>
            <span className={classNames("sort-button", {
              active: sort === ProductSort.PriceAsc,
            })} onClick={() => this.setState({ sort: ProductSort.PriceAsc })}>价格</span>
          </Flex>
        </header>
        <ProductList products={products}/>
      </div>
    )
  }

  private refreshProducts() {
    const { storeInfo } = this.props
    store.ProductServiceV1.getProducts()
      .name("手机")
      .storeId(storeInfo.id)
      .list()
      .then(pageProducts => this.setState({ products: pageProducts.elements }))
  }
}
